$(function () {
    var { form, layer } = layui;
    //渲染文章分类
    initCate();
    //调用初始化富文本编辑器函数======================
    initEditor()
    //----------------------------------------------
    // 1.1 获取裁剪区域的 DOM 元素
    var $image = $('#image')
    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }

    // 1.3 创建裁剪区域
    $image.cropper(options)

    //点击上传图片------------------------------------------------
    $('#btnChooseImage').on('click', function () {
        //让input触发点击事件
        $('#file').click();
    })
    //监听file上传的onchange事件
    $('#file').on('change', function (e) {
        //获取上传图片，生成一个临时预览路径
        var temPth = URL.createObjectURL(e.target.files[0]);
        //吧临时预览的图片放到裁剪区
        $image
            .cropper('destroy') //销毁旧的裁剪区域
            .attr('src', temPth) //重新设置土图片路径
            .cropper(options);  //重新初始化裁剪区域
    })
    //选择分类，默认已发布
    var state = '已发布';
    //监听表单提交事件
    $('.layui-form-publish').on('submit', function (e) {
        e.preventDefault();
        console.log(this)
        //创建formData对象  里面是dom对象
        //把数据都存到fd中
        var fd = new FormData($(this)[0]);
        // 把发布状态追加到fd里面
        fd.append('state', state);
        // 4. 将封面裁剪过后的图片，输出为一个文件对象
        $image
            .cropper('getCroppedCanvas', {
                // 创建一个 Canvas 画布
                width: 400,
                height: 280,
            })
            .toBlob(function (blob) {
                // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                // 5. 将文件对象，存储到 fd 中
                fd.append('cover_img', blob);
                // 6. 发起 ajax 数据请求
                publishArticle(fd);
            });
    })
    //定义发表文章的函数============================
    function publishArticle(fd) {
        //发送ajax请求
        $.ajax({
            type: 'POST',
            url: '/my/article/add',
            data: fd,
            //用formdata必须加2个配置
            contentType: false,
            processData: false,
            success: function (res) {
                layer.msg(res.message);
                if (res.status !== 0) return
                //发布成功后跳转到文章列表页面
                location.href = '/article/article-list.html';
            }
        })
    }

    //定义加载文章分类的方法=========================
    function initCate() {
        $.ajax({
            type: 'get',
            url: '/my/article/cates',
            success: function (res) {
                // console.log(res)
                if (res.status !== 0) return layer.msg('获取文章分类失败！')
                //调用模板引擎
                var html = template('fenlei_muBan',
                    res)
                console.log(html)
                //渲染到select标签里面
                $('.select').html(html)
                //调用form.render方法渲染
                form.render()
            }
        })
    }



})